<template>
	<label class="st-checkbox"
				 :class="{ 'is-checked': isChecked }">
		<span class="st-checkbox_input">
			<span class="st-checkbox_inner"></span>
			<input type="checkbox"
						 class="st-checkbox_original"
						 :name="name"
						 :value="label"
						 v-model="model">
		</span>
		<span class="st-checkbox_label">
			<slot></slot>
			<template v-if="!$slots.default">{{ label }}</template>
		</span>
	</label>
</template>

<script>
export default {
	name: 'StCheckbox',
	props: {
		label: {
			type: String,
			default: ''
		},
		value: {
			type: Boolean,
			default: false
		},
		name: {
			type: String,
			default: ''
		}
	},
	computed: {
		model: {
			get() {
				return this.isGroup ? this.CheckboxGroup.value : this.value
			},
			set(value) {
				this.isGroup
					? this.CheckboxGroup.$emit('input', value)
					: this.$emit('input', value)
				console.log(value)
			}
		},
		isGroup() {
			return !!this.CheckboxGroup
		},
		isChecked() {
			return this.isGroup ? this.model.includes(this.label) : this.model
		}
	},
	inject: {
		CheckboxGroup: {
			default: ''
		}
	}
}
</script>

<style scoped lang="scss">
.st-checkbox {
	color: #606266;
	font-weight: 500;
	font-size: 14px;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	user-select: none;
	margin-right: 30px;

	.st-checkbox_input {
		white-space: nowrap;
		cursor: pointer;
		outline: none;
		display: inline-block;
		line-height: 1;
		position: relative;
		vertical-align: middle;

		.st-checkbox_inner {
			display: inline-block;
			position: relative;
			border: 1px solid #dcdfe6;
			border-radius: 2px;
			box-sizing: border-box;
			width: 14px;
			height: 14px;
			background-color: #fff;
			z-index: 1;
			transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
				background-color 0.25s, cubic-bezier(0.71, -0.46, 0.29, 1.46);
			&:after {
				box-sizing: content-box;
				content: '';
				border: 1px solid #ffffff;
				border-left: 0;
				border-top: 0;
				height: 7px;
				left: 4px;
				position: absolute;
				top: 1px;
				transform: rotate(45deg) scaleY(0);
				width: 3px;
				transition: transform 0.15s ease-in 0.05s;
				transform-origin: center;
			}
		}

		.st-checkbox_original {
			opacity: 0;
			outline: none;
			position: absolute;
			left: 10px;
			margin: 0;
			width: 0;
			height: 0;
			z-index: -1;
		}
	}

	.st-checkbox_label {
		display: inline-block;
		padding-left: 10px;
		line-height: 19px;
		font-size: 14px;
	}
}

// 选中的样式
.st-checkbox.is-checked {
	.st-checkbox_input {
		.st-checkbox_inner {
			background-color: #409eff;
			border-color: #409eff;
		}
		&:after {
			transform: rotate(45deg) scaleY(1);
		}
	}

	.st-checkbox_label {
		color: #409eff;
	}
}
</style>
